<template>
  <view class="run-group-page">
    <view class="header-box">
      <view class="header" :style="{paddingTop: (useAppData.titleHeight+3) + 'px'}">
        <view class="back-box" style="left: 0;" @tap="gotoBack">
          <image class="back-img" src="../../static/icon-back.png"></image>
        </view>
        <span>活动说明</span>
      </view>
    </view>
    <view class="reward-modal">
      <view class="reward-box">
        <view class="text">
          <image class="desc-img" src="../static/jianglishuoming@2x.png"></image>
          <text class="label">{{state.activeTime}}</text>
        </view>
        <image class="gift" src="../static/liwu@2x.png"></image>
      </view>
      <view class="rank-modal">
        <view class="rank-modal-item">
          <image class="head-bar-img" src="../static/lipinhe@2x.png"></image>
          <view class="content">
            <view class="ranking">
              <text class="rank-name">第一名</text>
              <image class="rank-icon" src="../static/diyiwei@2x.png"></image>
<!--              <text class="rank-reward-name">{{state.first.configValue}}</text>-->
            </view>
            <view class="prize-modal">
              <view class="prize-modal-item" v-for="it in state.first.subConfigs" :key="it.uuid">
                <image class="reward-image" :src="it.configValue"></image>
                <text class="reward-name">{{it.configDesc}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="rank-modal-item">
          <image class="head-bar-img" src="../static/lipinhe@2x.png"></image>
          <view class="content">
            <view class="ranking">
              <text class="rank-name">第二名</text>
              <image class="rank-icon" src="../static/direwei@2x.png"></image>
<!--              <text class="rank-reward-name">{{state.second.configValue}}</text>-->
            </view>
            <view class="prize-modal">
              <view class="prize-modal-item" v-for="it in state.second.subConfigs" :key="it.uuid">
                <image class="reward-image" :src="it.configValue"></image>
                <text class="reward-name">{{it.configDesc}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="rank-modal-item">
          <image class="head-bar-img" src="../static/lipinhe@2x.png"></image>
          <view class="content">
            <view class="ranking">
              <text class="rank-name">第三名</text>
              <image class="rank-icon" src="../static/disanwei@2x.png"></image>
<!--              <text class="rank-reward-name">{{state.three.configValue}}</text>-->
            </view>
            <view class="prize-modal">
              <view class="prize-modal-item" v-for="it in state.three.subConfigs" :key="it.uuid">
                <image class="reward-image" :src="it.configValue"></image>
                <text class="reward-name">{{it.configDesc}}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="rank-modal-item">
          <image class="head-bar-img" src="../static/lipinhe@2x.png"></image>
          <view class="content">
            <view class="ranking youth-rank">
              <text class="rank-name">少年跑团优胜奖</text>
            </view>
            <view class="desc">（少年跑团第一名即可获奖，跑团内成员均为18岁及以下，可算为少年跑团）</view>
            <view class="prize-modal">
              <view class="prize-modal-item" v-for="it in state.youth.subConfigs" :key="it.uuid">
                <image class="reward-image" :src="it.configValue"></image>
                <text class="reward-name">{{it.configDesc}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="reward-info">
      <text class="title">其他说明</text>
      <text class="label">1、活动期间，每人仅可创建或加入一个跑团，退出、移除、解散跑团后将不可恢复;</text>
      <text class="label">2、活动奖品由团长统一分配，最终解释权归活动方所有。</text>
    </view>
  </view>
</template>

<script setup>
import { onLaunch, onShow, onHide, onUnload,onPullDownRefresh, onShareAppMessage, onShareTimeline } from "@dcloudio/uni-app";
import { ref, reactive, onMounted, watch } from "vue"
import * as API from "../../api/api"
import { getTime } from "../../utils/util"
import { storeToRefs } from "pinia";
import { useRunInfoStore } from "../../store/runInfo";
import { useAppStore } from "../../store/app";
import { useShareStore } from "../../store/share";
import { useGroupStore } from "../../store/group"
const useGroupData = useGroupStore();
const useShareData = useShareStore()
const useAppData = useAppStore()
const useRunInfoData = useRunInfoStore()
import headerBgImg from '../../static/bg@2x_compressed.png'
import {getConfigList} from "../../api/api";
const { showPictureUpload } = storeToRefs(useRunInfoData)
const { safeBottom } = storeToRefs(useAppStore)
const transferPopup = ref(null)
const alertDialog = ref(null)
const uploadAvatar = ref(null)
const state = reactive({
  list: [
    {
      name: '大奖1',
      item: []
    }
  ],
  show: false,
  activePrize: '',
  activeTime: '',
  first: {
    configDesc: "",
    configKey: "",
    configValue: "",
    createBy: null,
    createTime: "",
    lockVersion: null,
    orderNo: 0,
    pageNum: null,
    pageSize: null,
    parentUuid: "",
    subConfigs: [],
    updateBy: null,
    updateTime: null,
    uuid: "",
  },
  second: {
    configDesc: "",
    configKey: "",
    configValue: "",
    createBy: null,
    createTime: "",
    lockVersion: null,
    orderNo: 0,
    pageNum: null,
    pageSize: null,
    parentUuid: "",
    subConfigs: [],
    updateBy: null,
    updateTime: null,
    uuid: "",
  },
  three: {
    configDesc: "",
    configKey: "",
    configValue: "",
    createBy: null,
    createTime: "",
    lockVersion: null,
    orderNo: 0,
    pageNum: null,
    pageSize: null,
    parentUuid: "",
    subConfigs: [],
    updateBy: null,
    updateTime: null,
    uuid: "",
  },
  youth: {
    configDesc: "",
    configKey: "",
    configValue: "",
    createBy: null,
    createTime: "",
    lockVersion: null,
    orderNo: 0,
    pageNum: null,
    pageSize: null,
    parentUuid: "",
    subConfigs: [],
    updateBy: null,
    updateTime: null,
    uuid: "",
  },
  userInfo: null,
  barWidth: '30%',
  dialogType: 1,
  showEditPicture: false,
})

onShareAppMessage((res) => {
  return useShareData.shareInfo
})
onShareTimeline((res) => {
  return useShareData.shareInfo
})

const gotoBack = () => {
  uni.navigateBack()
}

// 获取页面数据
const getGroupInfo = () => {
  getConfigList({
    parentKey: useGroupData?.groupType == 1 ? "family_prize_desc" : "prize_desc",
    isRecursive: true
  }).then(res => {
    if (res.code === 0) {
      res.data.forEach(val => {
        if (val.configKey === "event_time") {
          state.activeTime = val.configValue
        }
        if (val.configKey === "first_prize") {
          state.first = val
        }
        if (val.configKey === "second_prize") {
          state.second = val
        }
        if (val.configKey === "third_prize") {
          state.three = val
        }
        if (val.configKey === "youth_run_group_winning_prize") {
          state.youth = val
        }
      })
    }
    console.log(res, 33333333333)
  }).finally(() => {
  })
}

onShow(() => {
  state.userInfo = uni.getStorageSync("userInfo") ? JSON.parse(uni.getStorageSync("userInfo")) : null
  getGroupInfo()
})
</script>

<style lang="scss" scoped>
.run-group-page{
  width: 100vw;
  //height: calc(100vh - 88rpx);
  padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
  padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
  background: linear-gradient( 168deg, #C8FFE1 0%, #E3FFF9 23%, #E5FDFF 100%);
  overflow: hidden;
  .header-box{
    position: relative;
    width: 100vw;
    text-align: center;
    .title{
      font-size: 34rpx;
      color: #000000;
    }
    .header-bg{
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      z-index: -1;
    }
    .update-btn{
      width: 170rpx;
      height: 60rpx;
      margin: 0 auto;
      background: rgba(0,0,0,0.3);
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 60rpx;
      margin-top: 12px;
      .label{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: rgba(255,255,255,0.7);
        line-height: 34rpx;
        text-align: center;
        font-style: normal;
      }
      .icon{
        width: 28rpx;
        height: 28rpx;
      }
    }
  }
  .reward-modal{
    .reward-box{
      padding-top: 24rpx;
      display: flex;
      justify-content: space-between;
      .text{
        flex: 1;
        flex-shrink: 0;
        margin-left: 24rpx;
        .desc-img{
          display: block;
          width: 260rpx;
          height: 88rpx;
          margin-top: 20rpx;
        }
        .label{
          margin-top: 6rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 30rpx;
          color: rgba(34,34,34,0.89);
          line-height: 44rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .gift{
        display: block;
        width: 226rpx;
        height: 226rpx;
        margin: 0 50rpx 0 32rpx
      }
    }
    .rank-modal{
      margin-top: 28rpx;
      .rank-modal-item{
        width: 688rpx;
        margin: 0 auto 32rpx;
        .head-bar-img{
          width: 688rpx;
          height: 70rpx;
        }
        .content{
          width: 100%;
          min-height: 330rpx;
          background: #F9FEFA;
          border-radius: 24rpx;
          padding: 0 32rpx 22rpx;
          box-sizing: border-box;
          .ranking{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            height: 100rpx;
            .rank-name{
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 36rpx;
              color: #222222;
              line-height: 50rpx;
              text-align: left;
              font-style: normal;
              text-indent: 8rpx;
            }
            .rank-icon{
              width: 60rpx;
              height: 60rpx;
              margin: 0 12rpx 0 4rpx;
            }
            .rank-reward-name{

            }
          }
          .youth-rank{
            height: 50rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 600;
            font-size: 36rpx;
            color: #222222;
            line-height: 50rpx;
            text-align: left;
            font-style: normal;
          }
          .prize-modal{
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            .prize-modal-item{
              width: 200rpx;
              .reward-image{
                display: block;
                width: 200rpx;
                height: 144rpx;
                margin: 0 auto;
                border-radius: 16rpx;
                overflow: hidden;
              }
              .reward-name{
                display: block;
                text-align: center;
                margin-top: 16rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #222222;
                line-height: 34rpx;
                font-style: normal;
              }
            }
            .prize-modal-item:first-child{
              width: 190rpx;
              text-align: center;
              .reward-image{
                display: block;
                margin: 0 auto;
                width: 144rpx;
                height: 144rpx;
              }
              .reward-name{
                display: block;
                width: 100%;
              }
            }
          }
          .desc{
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 22rpx;
            color: rgba(34,34,34,0.8);
            line-height: 32rpx;
            text-align: left;
            font-style: normal;
            margin-top: 8rpx;
            margin-bottom: 22rpx;
          }
        }
      }
    }
  }
  .reward-info{
    width: 686rpx;
    height: 356rpx;
    background: #F9FEFA;
    border-radius: 24rpx;
    padding: 20rpx;
    box-sizing: border-box;
    margin: 0 auto;
    .title{
      display: block;
      height: 50rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 500;
      font-size: 36rpx;
      color: #222222;
      line-height: 50rpx;
      text-align: left;
      font-style: normal;
      margin-bottom: 22rpx;
    }
    .label{
      display: block;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 28rpx;
      color: #222222;
      line-height: 40rpx;
      text-align: left;
      font-style: normal;
      margin-bottom: 16rpx;
    }
    .label:last-child{
      margin-bottom: 0;
    }
  }
  .popup-container{
    .op-content{
      width: 710rpx;
      height: 218rpx;
      margin: 0 auto;
      background: rgba(255,255,255,0.8);
      border-radius: 14rpx;
      backdrop-filter: blur(25px);
      .op-item{
        height: 109rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: rgba(34,34,34,0.9);
        line-height: 109rpx;
        font-style: normal;
        text-align: center;
        &:first-child{
          border-bottom: 2rpx solid rgba(0,0,0,0.2);
        }
      }
    }
    .close-btn{
      width: 710rpx;
      height: 104rpx;
      margin: 0 auto;
      line-height: 104rpx;
      text-align: center;
      background: #FFFFFF;
      border-radius: 16rpx;
      margin-top: 16rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 600;
      font-size: 32rpx;
      color: #08CB8F;
      font-style: normal;
    }
  }
  .dialog-content{
    .label{
      height: 44rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 32rpx;
      color: #1C1C1E;
      line-height: 44rpx;
      text-align: center;
      font-style: normal;
    }
    .text{
      height: 32rpx;
      font-family: PingFangSC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #ABAFBA;
      line-height: 32rpx;
      text-align: center;
      font-style: normal;
      margin-top: 16rpx;
    }
  }
}
</style>
